<template>
	<scroll-view class="lists" scroll-y="true" @scrolltolower="loadMore">

		<slot></slot>
		<view class="btm-zw">

		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const props = defineProps({

		finished:{ 
			type:Boolean 
		}
	})
	const emit = defineEmits(['load'])
	const list = ref([]);
	const loading = ref(false);
	const noMore = ref(false);
	const page = ref(1);



	// 监听滚动到底部  
	const loadMore = () => {
		if(props.finished){return}
		// if (loading.value || noMore.value) return;
		console.log('底部')
		emit('load')
	}
</script>

<style scoped>
	.lists {
		width: 100%;

		height: 100%;
		/* 设置固定高度以产生滚动 */
		overflow-y: auto;
		/* border: 1px solid #ccc; */

	}

	.list-item {
		padding: 10px;
		border-bottom: 1px solid #eee;
	}

	.loading,
	.no-more {
		text-align: center;
		padding: 10px 0;
	}

	.btm-zw {
		width: 100%;
		height: 80rpx;
	}
</style>